<template>
  <view class="container">
    <view class="button-container">
      <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc5f9e.png" class="role-img"/>
      <button class="role-button" @tap="handleJobSeeker">我要找工作</button>
      <view class="divider">
        <view class="line"></view>
        <text class="or-text">或者</text>
        <view class="line"></view>
      </view>
      <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf2dbc3b39.png" class="role-img"/>
      <button class="role-button" @tap="handleRecruiter">我要招人</button>
    </view>
    <view class="logout" @tap="handleLogout">退出登录</view>
  </view>
</template>

<script>
export default {
  methods: {
    // 处理“我要找工作”按钮点击事件
    handleJobSeeker() {
      uni.showToast({
        title: '您选择了“我要找工作”',
        icon: 'none',
      });
      这里可以添加跳转到找工作页面的逻辑
      uni.navigateTo({
        url: '/pages/jobSeeker/jobSeeker',
      });
    },

    // 处理“我要招人”按钮点击事件
    handleRecruiter() {
      uni.showToast({
        title: '您选择了“我要招人”',
        icon: 'none',
      });
      //这里可以添加跳转到招人页面的逻辑
      uni.navigateTo({
        url: '/pages/login/recruiterInfo',
      });
    },

    // 处理退出登录按钮点击事件
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success(res) {
          if (res.confirm) {
            uni.showToast({
              title: '退出登录成功',
              icon: 'none',
            });
            // 这里可以添加退出登录的逻辑
            // uni.redirectTo({
            //   url: '/pages/login/login',
            // });
          }
        },
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  height: 750px;
  background-color: #FDFDFD;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  /* padding-top: 124rpx; */
}

.role-img{
  width: 190px;
  height: 143px;
}

.role-button {
  width: 215px;
  height: 40px;
  margin: 20px;
  font-size: 15px;
  border: none;
  border-radius: 32px;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  font-family: PingFang SC;
  font-weight: 400;
  letter-spacing: 0%;
  color: #FFFFFF;
}

.role-button:hover {
  background-color: #0056b3;
}

.divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
}

.line {
  flex: 1;
  width: 155px;
  height: 1px;
  background-color: #f0f0f0;
}

.or-text {
  width: 22px;
  height: 15px;
  margin: 0 10px;
  color: #B4B4B4;
  font-family: "PingFang SC";
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.logout {
  width: 44px;
  height: 15px;
  margin-top: 20px;
  font-family: PingFang SC;
  font-size: 11px;
  font-weight: 400;
  color: #2F318B;
  cursor: pointer;
}

.logout:hover {
  color: #0056b3;
}
</style>